<template>
    <div style="width: 100%">
        <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :lg="12" class="col-item">
                <el-card shadow="always">
                    <div slot="header">
                        <span><strong>CPU</strong></span>
                    </div>
                    <ul>
                        <li class="item">
                            <el-row>
                                <el-col :span="12"><strong>属性</strong></el-col>
                                <el-col :span="12"><strong>值</strong></el-col>
                            </el-row>
                        </li>
                        <li class="item">
                            <el-row>
                                <el-col :span="12">核心数</el-col>
                                <el-col :span="12" v-text="data.cpu.cpuNum"></el-col>
                            </el-row>
                        </li>
                        <li class="item">
                            <el-row>
                                <el-col :span="12">用户使用率</el-col>
                                <el-col :span="12" v-text="data.cpu.used+'%'"></el-col>
                            </el-row>
                        </li>
                        <li class="item">
                            <el-row>
                                <el-col :span="12">系统使用率</el-col>
                                <el-col :span="12" v-text="data.cpu.sys+'%'"></el-col>
                            </el-row>
                        </li>
                        <li class="item">
                            <el-row>
                                <el-col :span="12">当前空闲率</el-col>
                                <el-col :span="12" v-text="data.cpu.free+'%'"></el-col>
                            </el-row>
                        </li>
                    </ul>
                </el-card>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="12" class="col-item">
                <el-card shadow="always">
                    <div slot="header">
                        <span><strong>内存</strong></span>
                    </div>
                    <ul>
                        <li class="item">
                            <el-row>
                                <el-col :span="8"><strong>属性</strong></el-col>
                                <el-col :span="8"><strong>内存</strong></el-col>
                                <el-col :span="8"><strong>JVM</strong></el-col>
                            </el-row>
                        </li>
                        <li class="item">
                            <el-row>
                                <el-col :span="8">总内存</el-col>
                                <el-col :span="8" v-text="data.mem.total+'G'"></el-col>
                                <el-col :span="8" v-text="data.jvm.total+'M'"></el-col>
                            </el-row>
                        </li>
                        <li class="item">
                            <el-row>
                                <el-col :span="8">已用内存</el-col>
                                <el-col :span="8" v-text="data.mem.used+'G'"></el-col>
                                <el-col :span="8" v-text="data.jvm.used+'M'"></el-col>
                            </el-row>
                        </li>
                        <li class="item">
                            <el-row>
                                <el-col :span="8">剩余内存</el-col>
                                <el-col :span="8" v-text="data.mem.free+'G'"></el-col>
                                <el-col :span="8" v-text="data.jvm.free+'M'"></el-col>
                            </el-row>
                        </li>
                        <li class="item">
                            <el-row>
                                <el-col :span="8">使用率</el-col>
                                <el-col :span="8" v-text="data.mem.usage+'%'"></el-col>
                                <el-col :span="8" v-text="data.jvm.usage+'%'"></el-col>
                            </el-row>
                        </li>
                    </ul>
                </el-card>
            </el-col>
        </el-row>
        <el-row class="row">
            <el-card shadow="always">
                <div slot="header">
                    <span><strong>服务器信息</strong></span>
                </div>
                <ul>
                    <li class="item">
                        <el-row>
                            <el-col :span="6">服务器名称</el-col>
                            <el-col :span="6" v-text="data.sys.computerName"></el-col>
                            <el-col :span="6">操作系统</el-col>
                            <el-col :span="6" v-text="data.sys.osName"></el-col>
                        </el-row>
                    </li>
                    <li class="item">
                        <el-row>
                            <el-col :span="6">服务器IP</el-col>
                            <el-col :span="6" v-text="data.sys.computerIp"></el-col>
                            <el-col :span="6">系统架构</el-col>
                            <el-col :span="6" v-text="data.sys.osArch"></el-col>
                        </el-row>
                    </li>
                </ul>
            </el-card>
        </el-row>
        <el-row class="row">
            <el-card shadow="always">
                <div slot="header">
                    <span><strong>Java虚拟机信息</strong></span>
                </div>
                <ul>
                    <li class="item">
                        <el-row>
                            <el-col :span="6">Java名称</el-col>
                            <el-col :span="6" v-text="data.jvm.name"></el-col>
                            <el-col :span="6">Java版本</el-col>
                            <el-col :span="6" v-text="data.jvm.version"></el-col>
                        </el-row>
                    </li>
                    <li class="item">
                        <el-row>
                            <el-col :span="6">启动时间</el-col>
                            <el-col :span="6" v-text="data.jvm.startTime"></el-col>
                            <el-col :span="6">运行时长</el-col>
                            <el-col :span="6" v-text="data.jvm.runTime"></el-col>
                        </el-row>
                    </li>
                    <li class="item">
                        <el-row>
                            <el-col :span="6">安装路径</el-col>
                            <el-col :span="6" v-text="data.jvm.home"></el-col>
                            <el-col :span="6">项目路径</el-col>
                            <el-col :span="6" v-text="data.sys.userDir"></el-col>
                        </el-row>
                    </li>
                </ul>
            </el-card>
        </el-row>

        <el-row class="row">
            <el-card shadow="always">
                <div slot="header">
                    <span><strong>磁盘状态</strong></span>
                </div>
                <ul>
                    <li class="item">
                        <el-row>
                            <el-col :span="4"><strong>盘符路径</strong></el-col>
                            <el-col :span="4"><strong>文件系统</strong></el-col>
                            <el-col :span="4"><strong>盘符类型</strong></el-col>
                            <el-col :span="3"><strong>总大小</strong></el-col>
                            <el-col :span="3"><strong>可用大小</strong></el-col>
                            <el-col :span="3"><strong>已用大小</strong></el-col>
                            <el-col :span="3"><strong>使用百分比</strong></el-col>
                        </el-row>
                    </li>

                    <li class="item" v-for="item in data.sysFiles">
                        <el-row>
                            <el-col :span="4" v-text="item.dirName"></el-col>
                            <el-col :span="4" v-text="item.sysTypeName?item.sysTypeName:'未知'"></el-col>
                            <el-col :span="4" v-text="item.typeName"></el-col>
                            <el-col :span="3" v-text="item.total"></el-col>
                            <el-col :span="3" v-text="item.free"></el-col>
                            <el-col :span="3" v-text="item.used"></el-col>
                            <el-col :span="3" v-text="item.usage+'%'"></el-col>
                        </el-row>
                    </li>
                </ul>
            </el-card>
        </el-row>
    </div>
</template>
<script lang="ts">
    import {Component, Vue} from "vue-property-decorator";
    import {getServerInfo} from "@/api/server";

    @Component
    export default class Server extends Vue {
        data: any = {
            cpu: {
                cpuNum: 0,
                total: 0,
                sys: 0,
                used: 0,
                wait: 0,
                free: 0
            },
            mem: {
                total: 0,
                used: 0,
                free: 0,
                usage: 0
            },
            jvm: {
                total: 0,
                max: 0,
                free: 0,
                version: "",
                home: "",
                name: "",
                used: 0,
                startTime: "",
                usage: 0,
                runTime: ""
            },
            sys: {
                computerName: "",
                computerIp: "",
                userDir: "",
                osName: "",
                osArch: ""
            },
            sysFiles: []
        };

        getData() {
            getServerInfo({'loading': true}).then(response => {
                this.data = response.data;
            }).catch((e) => {
                console.log(e);
            });
        };

        mounted() {
            //页面加载完毕后执行的生命周期方法
            this.getData();
        }
    }
</script>

<style scoped lang="scss">
    .col-item {
        margin-bottom: 20px;
    }

    .row {
        margin-bottom: 20px;
    }


    ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

    .item {
        color: #606266;
        font-size: 14px;
        padding: 7px 10px;
        border-bottom: 1px solid rgb(231, 234, 236);
    }
</style>

